<template>
  <!--  -->
  <!-- 文件预览：音频预览） -->
  <!--  -->
  <div class="music">
    <div class="body-content">
        <div class="cover">
            <!-- 图片展示 -->
            <img src="@/assets/music_cover.png" />
        </div>
        <!-- 音频 -->
        <div class="music-player" ref="playerRef"></div>
    </div>
  </div>
</template>

<script setup>
import APlayer from "APlayer";     //音频插件，依赖下载在package.json第16行 (注：可能有问题)
import "APlayer/dist/Aplayer.min.css";
import { ref, reactive, getCurrentInstance, onMounted, computed, onUnmounted } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
    url: {
        type: String,
    },

    fileName: {
        type: String,
    },
});

const playerRef = ref();
const player = ref();
//加载音频
onMounted(() => {
    player.value = new APlayer({
        container: playerRef.value,
        audio: {
            url: `/api/${props.url}`,
            name: props.fileName,                                             //音频文件名
            cover: new URL("@/assets/music_icon.png", import.meta.url).href,  //封面
            artist: "",
        },
    });
});


//销毁对象
onUnmounted(() => {
    player.value.destroy();
})

</script>

<style lang="scss" scoped>
.music {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .body-content {
        text-align: center;
        width: 80%;
        .cover {
            margin: 0px auto;
            width: 200px;
            text-align: center;
            img {
                width: 100%;
            }
        }
        .music-player {
            margin-top: 20px;
        }
    }
}

</style>